<template>
	<view :class="$tm.vx.state().tmVuetify.black?'black bk':''">
		<tm-menubars title="轮播" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">基础示例</view>
			<tm-swiper dot-model="round" dot-direction="right" :indicator-dots="true" :list="list"></tm-swiper>
		</tm-sheet>
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">显示指示点</view>
		<tm-swiper :round="6" :margin="32"  :autoplay="true"  :indicator-dots="true" :list="list"></tm-swiper>
		<tm-sheet :shadow="24">
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">内联，指示点类型，位置</view>
			<tm-row>
				<tm-col :grid="6">
					<tm-swiper :round="3" :height="100" :width="300" inline  color="red" :autoplay="true" dot-model="number"  :indicator-dots="true" :list="list"></tm-swiper>
				</tm-col>
				<tm-col :grid="6">
					<tm-swiper :round="3" :height="100" inline :autoplay="true" dot-model="rect" :circular="true" dot-direction="right"  :indicator-dots="true" :list="list"></tm-swiper>
				</tm-col>
			</tm-row>
		</tm-sheet>
		<view style="height: 50upx;"></view>
	</view>
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSwiper from "@/tm-vuetify/components/tm-swiper/tm-swiper.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmSwiper,tmRow,tmCol},
		data() {
			return {
				list:[
					'https://picsum.photos/300?jv=3',
					'https://picsum.photos/300?jv=34',
					'https://picsum.photos/300?jv=5'
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
